<template>
    <el-dialog :model-value="dialogVisible" title="订单详情" width="800" high="800" :before-close="handleClose">
        <span>
            <el-form :model="rowForm" label-width="100px">
                <el-form-item label="报修人姓名">
                    <el-input v-model="rowForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="rowForm.phone" disabled></el-input>
                </el-form-item>
                <el-form-item label="报修时间">
                    <el-input v-model="rowForm.date" disabled></el-input>
                </el-form-item>
                <el-form-item label="任务描述">
                    <el-input v-model="rowForm.description" disabled></el-input>
                </el-form-item>
                <el-form-item label="地点">
                    <el-input v-model="rowForm.position" disabled></el-input>
                </el-form-item>
                <el-form-item label="任务状态">
                    <el-input v-model="rowForm.state" disabled></el-input>
                </el-form-item>
                <el-form-item label="当前维修人员编号">
                    <el-input v-model="rowForm.workerId" disabled></el-input>
                </el-form-item>
                工作分配
                <el-form-item label="维修人员编号">
                    <el-select v-model="nowWorker.id" placeholder="请选择维修人员编号" @change="selectWorker">
                        <el-option v-for="worker in allWorkers" :key="worker.id" :label="worker.id" :value="worker.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="对应姓名:">
                    <span>{{ nowWorker.name }}</span>
                </el-form-item>
                <el-form-item label="对应电话:">
                    <span>{{ nowWorker.phone }}</span>
                </el-form-item>
            </el-form>
        </span>
        <div style="text-align: right; margin-top: 20px;">
            <el-button type="primary" @click="comitForm">
                提交
            </el-button>
            <el-button @click="dialogVisible = false">
                取消
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import api from '@/api/axiosConfig';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            dialogVisible: false,
            rowForm: {
                name: '',
                phone: '',
                date: '',
                description: '',
                position: '',
                state: '',
                workerId: '',
                workerPhone: '',
            },
            allWorkers: [],
            nowWorker: {
                id: '',
                name: '',
                phone: '',
            },
        };
    },
    methods: {
        clearInterval() {
            this.nowWorker.id = '';
            this.nowWorker.name = '';
            this.nowWorker.phone = '';
        },
        handleClose() {
            this.dialogVisible = false;
        },
        setRow(row) {
            this.dialogVisible = true;
            this.rowForm = { ...row };
            this.load();
            this.clearInterval();
        },
        selectWorker() {
            this.nowWorker.name = this.allWorkers.find(worker => worker.id === this.nowWorker.id).name;
            this.nowWorker.phone = this.allWorkers.find(worker => worker.id === this.nowWorker.id).phone;
        },
        load() {
            api.get('/worker/free', {
                headers: {
                    'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
                }
            }).then(res => {
                this.allWorkers = res.data;
            }).catch(err => {
                console.log(err);
                ElMessage({
                    message: '加载失败',
                    type: 'warning',
                })
            });
        },
        comitForm() {
            api.put('/task/page',
                {
                    num: this.rowForm.num,
                    workerId: this.nowWorker.id,
                    state:'1',//处理中
                },
                {
                    headers: {
                        'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
                    }
                }
            ).then(res => {
                console.log(res);
                this.$emit('task-edit-success');
                ElMessage({
                    message: '提交成功',
                    type: 'info',
                })
                this.dialogVisible = false;
            }).catch(err => {
                console.log(err);
                ElMessage({
                    message: '提交失败',
                    type: 'warning',
                })
            });
            api.put('/worker/work',
                null,
                {
                    params: {
                        id: this.nowWorker.id,
                    },
                    headers: {
                        'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
                    }
                }
            )
                .then(res => {
                    console.log(res);
                    ElMessage({
                        message: '分配成功',
                        type: 'info',
                    })
                })
                .catch(err => {
                    console.log(err);
                    ElMessage({
                        message: '分配失败',
                        type: 'warning',
                    })
                });
            if (this.rowForm.workerId !== this.nowWorker.id & this.rowForm.workerId !== null) {
                api.put('/worker/free',
                    null,
                    {
                        params: {
                            id: this.rowForm.workerId,
                        },
                        headers: {
                            'Authorization': `Bearer ${this.$store.getters['token/getToken']}`
                        }
                    }
                ).then(res => {
                    console.log(res);
                    ElMessage({
                        message: '释放成功',
                        type: 'info',
                    })
                }).catch(err => {
                    console.log(err);
                    ElMessage({
                        message: '释放失败',
                        type: 'warning',
                    })
                });
            }
        },
    },
};    
</script>